<template>
  <div>
    <el-table
      border
      ref="singleTable"
      :data="tableData"
      highlight-current-row
      @current-change="handleCurrentChange"
      style="width: 100%"
    >
      <el-table-column type="index" width="100"> </el-table-column>
      <el-table-column property="username" label="用户名"> </el-table-column>
      <el-table-column property="mobile" label="电话"> </el-table-column>
      <el-table-column property="email" label="邮箱" width="230">
      </el-table-column>
      <el-table-column property="role_name" label="角色"> </el-table-column>
      <el-table-column label="状态">
        <template v-slot:default="scoped">
          <el-switch
            v-model="scoped.row.mg_state"
            @change="change($event, scoped.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column property="operation" label="操作" width="280">
        <template slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            content="编辑用户信息"
            placement="bottom"
          >
            <el-button type="primary" size="small" @click="SetItem(scope.row)">
              编辑
            </el-button>
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            content="删除用户"
            placement="bottom"
          >
            <el-button size="mini" type="danger" @click="DeleteItem(scope.row)">
              删除
            </el-button>
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            content="为用户分配角色"
            placement="bottom"
          >
            <el-button type="warning" size="small" @click="setroles(scope.row)">
              分配角色
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "UserTable",
  props: ["tableData"],
  data() {
    return {
      currentRow: null,
      mg_state: true,
    };
  },
  methods: {
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    setroles(obj) {
      this.$emit("setRoles", {
        rname: obj.role_name,
        uname: obj.username,
        id: obj.id,
      });
    },
    change(val, obj) {
      this.$emit("setstate", { state: val, id: obj.id });
    },
    DeleteItem(obj) {
      this.$emit("deleteItem", obj.id);
    },
    SetItem(obj) {
      this.$emit("setItem", obj);
    },
  },
};
</script>

<style lang="scss" scoped>
.el-table {
  margin-top: 10px;
  max-height: 700px;
}
</style>